<template>
    <div id="title">
         <!-- 用span模仿全选框checkbox 点击事件模仿checkbox勾选操作-->
            <span id="check-all" @click="$emit(`select-all`,checkall)" :class="{select:checkall}"></span>
            <!-- 事项输入框 双向绑定了数据cur，绑定了enter按下事件：添加事项；ctrl+enter按下事件：撤销删除-->
            <input type="text" placeholder="write something..." v-model="cur" @keyup.13="addItem" @keyup.ctrl.enter="$emit(`recall-item`)">
    </div>
</template>

<script>
export default {
    props:["checkall"],
    data(){
        return {
            //cur数据绑定的是事项输入框
            cur: ``,
        }
    },
    methods:{
        addItem(e){
            // 当ctrl按下时不触发该事件
            if (e.ctrlKey) return;
            if (!(this.cur.trim())) return;
            this.$emit("add-item",this.cur);
            this.cur=``;
        },
    }
}
</script>

<style>

</style>